<template>
  <mxp-translate
    ref="maskRef"
    :duration="duration"
    mode="fade"
    :autoShow="autoShow"
    :cusStyle="{
      position: 'fixed',
      flex: 1,
      display: 'flex',
      flexDirection: 'row',
      flexWrap: 'nowrap',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: background,
      overflow: 'hidden',
      zIndex,
      top: offsetTop,
      left: offsetLeft,
      right: offsetRight,
      bottom: offsetBottom,
      ...cusStyle,
    }"
    @click="onClick"
    @animationEnd="onAnimationEnd"
    @animationStart="onAnimationStart"
  ></mxp-translate>
</template>

<script lang="ts" setup>
  import { publicStyeProps } from '../mxp-tool/utils/public-props';
  import { type PropType, ref } from 'vue';
  import type { $AllColorStr, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import MxpTranslate from '../mxp-translate/mxp-translate.vue';
  defineOptions({
    name: 'mxp-overlay',
  });

  defineProps({
    /** 是否自动显示(渲染完成就显示 ) */
    autoShow: { type: Boolean, default: false },
    /** 左边偏移量 */
    offsetLeft: { type: String as PropType<$SizeUnitStr>, default: '0px' },
    /** 顶部偏移量 (如自定义导航栏等) */
    offsetTop: { type: String as PropType<$SizeUnitStr>, default: '0px' },
    /** 右边偏移量 */
    offsetRight: { type: String as PropType<$SizeUnitStr>, default: '0px' },
    /** 底部偏移量 (如自定义tab栏) */
    offsetBottom: { type: String as PropType<$SizeUnitStr>, default: '0px' },
    /** 背景色 */
    background: { type: String as PropType<$AllColorStr>, default: 'rgba(0,0,0,0.3)' },
    /** 过度时间 */
    duration: { type: Number, default: 300 },
    /** 层级 */
    zIndex: { type: Number, default: 888 },
    ...publicStyeProps,
  });

  const emits = defineEmits<{
    (e: 'click'): void;
    (e: 'animationEnd', type: 'hide-animation' | 'show-animation'): void;
    (e: 'animationStart', type: 'hide-animation' | 'show-animation'): void;
  }>();

  export type $PopupModel = 'bottom' | 'center' | 'left' | 'right' | 'top';

  const maskRef = ref<InstanceType<typeof MxpTranslate> | null>(null);

  /** 显示 */
  function show() {
    maskRef.value?.show();
  }

  /** 关闭  */
  function hide() {
    maskRef.value?.hide();
  }

  /** 点击 */
  function onClick() {
    emits('click');
  }

  /** 动画开始 */
  function onAnimationStart(type: 'hide-animation' | 'show-animation') {
    emits('animationStart', type);
  }
  /** 动画结束 */
  function onAnimationEnd(type: 'hide-animation' | 'show-animation') {
    emits('animationEnd', type);
  }

  defineExpose({
    /** 显示弹出框 */
    show,
    /** 关闭弹出框 */
    hide,
  });
</script>

<style lang="scss" scoped>
  .mxp-popup {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: center;

    .title-view {
      position: relative;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: center;
      height: 44px;
    }

    .close-view {
      position: absolute;
      z-index: 1;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: center;
      height: 44px;
    }
  }
</style>
